<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/fore/foreHeader::html('注册')">
</head>
<!--<script src="webjars/jquery/2.0.0/jquery.min.js"></script>-->
<!--<link rel="stylesheet" href="webjars/bootstrap/3.0.1/css/bootstrap.min.css">-->
<!--<script src="webjars/bootstrap/3.0.1/js/bootstrap.min.js"></script>-->


<!--文本校验-->
<link href="bootstrapValidator/bootstrapValidator.min.css" rel="stylesheet">
<script type="text/javascript" src="bootstrapValidator/bootstrapValidator.min.js"></script>

<body>
<div class="container" id="workingArea">
    <h1 align="center">Welcome to Nursery Login Page</h1>
    <form class="form-signin col-md-offset-4 col-md-4">
        <h2 class="form-signin-heading">Sign up</h2>
        <div class="form-group">
            <label for="inputEmail" class="sr-only">Email address</label>
            <input v-model="bean.email" name="username" type="text" id="inputEmail" class="form-control"
                   placeholder="UserName" required
                   autofocus>
        </div>
        <div class="form-group">
            <label for="inputPassword" class="sr-only">Password</label>
            <input v-model="bean.password" name="password" type="password" id="inputPassword" class="form-control"
                   placeholder="Password" required>
        </div>
        <!--<div class="form-group">-->
            <!--<label for="inputName" class="sr-only">Name</label>-->
            <!--<input v-model="bean.name" name="name" type="text" id="inputName" class="form-control" placeholder="Name"-->
                   <!--required>-->
        <!--</div>-->
        <!--<div class="form-group">-->
            <!--<label for="inputPhone" class="sr-only">Phone</label>-->
            <!--<input v-model="bean.phone" name="phone" type="text" id="inputPhone" class="form-control"-->
                   <!--placeholder="Phone" required>-->
        <!--</div>-->
        <button class="btn btn-lg btn-primary btn-block" type="submit" @click="register">Sign up</button>
        <button class="btn btn-lg btn-primary btn-block" @click="toSignIn">Return</button>
    </form>

</div>


</body>
<script>
    $(function () {
        var data4Vue = {
            uri: "register_1",
            bean: {email: "", password: "", name: "", phone: "", role: "家长"}
        };
        var vue = new Vue({
            el: '#workingArea',
            data: data4Vue,
            methods: {
                register: function () {
                    /*bootstrap提交验证*/
                    var validator= $('form').data('bootstrapValidator').validate();
                    if(!validator.isValid()){
                        //没有通过校验
                        return;
                    } else {
                        //通过校验，可进行提交等操作
                    }
                    var url = this.uri;
                    axios.post(url, this.bean).then(function (response) {
                        if (response.data.code == 0) {
                            alert("注册成功");
                        } else
                            alert(response.data.message);
                    })
                },
                toSignIn: function () {
                    location.href = "foreLogin";
                }
            }
        })
    })
</script>

<!--表单校验-->
<script>
    $(function () {
        $('form').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
//                valid: 'glyphicon glyphicon-ok',
//                invalid: 'glyphicon glyphicon-remove',
//                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                username: {
                    message: '用户名验证失败',
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        },
                        stringLength: {
                            min: 6,
                            max: 18,
                            message: '用户名长度必须在6到18位之间'
                        },
                        regexp: {
                            regexp: /^[a-zA-Z0-9_]+$/,
                            message: '用户名只能包含大写、小写、数字和下划线'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                },
//                phone: {
//                    validators: {
//                        regexp: {
//                            /*手机号1开头，第二位34578 然后11位*/
//                            regexp: /^1[3|4|5|7|8][0-9]{9}$/,
//                            message: '请输入正确的11位手机号码'
//                        }
//                    }
//                },
//                name: {
//                    validators: {
//                        regexp: {
//                            /*中文 2-7位*/
//                            regexp: /^([\u4e00-\u9fa5]){2,7}$/,
//                            message: '请输入正确的姓名'
//                        }
//                    }
//
//                }
            }
        });
    });
</script>
</html>